<template>
  <div class="box">
    <van-nav-bar
      title="地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- <P>{{ store.userid }}</P> -->
    <van-address-list
      v-model="chosenAddressId"
      :list="list1"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
    <van-popup
      v-model:show="showBottom"
      position="bottom"
      :style="{ height: '70%' }"
    >
      <van-address-edit
        :address-info="addressinfo"
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, onUpdated } from "vue";
import { areaList } from "@vant/area-data";
import { showToast } from "vant";
import {
  getAddressList,
  address,
  setUpdate,
  setDelete,
} from "../../server/address";
import { useCounterStore } from "@/stores/counter";

let addressinfo = ref<any>({
  id: "",
  name: "",
  tel: "",
  address: "",
  isDefault: false,
});
let store = useCounterStore();
let showBottom = ref(false);
let searchResult = ref<any>([]);
let areaLis = ref(areaList);
let num = ref(1);
//地址列表
let list = ref([]);
let disabledList = ref([
  {
    id: "3",
    name: "王五",
    tel: "1320000000",
    address: "浙江省杭州市滨江区江南大道 15 号",
  },
]);
let list1 = ref<any>([]);
let chosenAddressId = ref(1);
onMounted(() => {
  getresslist();
});
//关闭表单时清楚表单上的数据
onUpdated(() => {
  if (!showBottom.value) {
    addressinfo.value = {
      id: "",
      name: "",
      tel: "",
      address: "",
    };
  }
});

list1 = computed(() => {
  return list.value.map((item: any) => {
    return {
      id: item.addressid,
      name: item.name,
      tel: item.tel,
      address: item.province + item.city + item.county + item.addressDetail,
      isDefault: item.isDefault,
    };
  });
});

function onClickLeft() {
  history.back();
}
//点击保存时可以根据表单状态决定执行添加事件还是修改事件
function onSave(data: any) {
  // showToast("save");
  console.log(data);
  if (num.value === 1) {
    address({
      userid: localStorage.getItem("userid"),
      name: data.name,
      tel: data.tel,
      province: data.province,
      city: data.city,
      county: data.county,
      addressDetail: data.addressDetail,
      isDefault: data.isDefault,
    }).then((res: any) => {
      console.log(res);
      if (res.code === "200") {
        getresslist();
        showBottom.value = false;
      }
    });
  } else {
    setUpdate({
      addressid: data.id,
      userid: localStorage.getItem("userid"),
      name: data.name,
      tel: data.tel,
      province: data.province,
      city: data.city,
      county: data.county,
      addressDetail: data.addressDetail,
      isDefault: data.isDefault,
    }).then((res: any) => {
      if (res.code === "200") {
        getresslist();
        showBottom.value = false;
      }
    });
  }
}
//删除
function onDelete(data: any) {
  console.log(data);
  setDelete({ addressid: data.id }).then((res) => {
    if (res.data.code === "200") {
      getresslist();
      showBottom.value = false;
    }
  });
}
//默认详细地址
function onChangeDetail(val: any) {
  if (val) {
    searchResult.value = [
      {
        name: "黄龙万科中心",
        address: "杭州市西湖区",
      },
    ];
  } else {
    searchResult.value = [];
  }
}
//获取地址列表
function getresslist() {
  console.log(store.userid);
  let id = localStorage.getItem("userid");
  getAddressList({ userid: id }).then((res: any) => {
    if ((res.code = "200")) {
      console.log(res);
      list.value = res.data;
    }
  });
}
//显示表单
function onAdd() {
  num.value = 1;
  showToast("新增地址");
  showBottom.value = true;
}
// 点击编辑时获取点击对象,并将对象的值赋给表单初始数据
function onEdit(item: any, index: any) {
  showToast("编辑地址:" + index);
  list.value.forEach((item1: any) => {
    if (item1.addressid === item.id) {
      addressinfo.value = {
        id: item1.addressid,
        name: item1.name,
        tel: item1.tel,
        city: item1.city,
        county: item1.county,
        addressDetail: item1.addressDetail,
        areaCode: item1.areaCode,
        isDefault: item1.isDefault,
      };
    }
  });
  console.log(item);
  showBottom.value = true;
  num.value = 2;
}
</script>

<style lang="scss" scoped>
.box {
  background-color: #f5f5f5;
  height: 100vh;
  span {
    font-size: 14px;
    margin: 10px;
  }
}
</style>
